<template>
    <div class="counterbox">
<Tabbar :titlename="'雷达'"/>
        <div class="countercs" ref="counterts">
            
        </div>
    </div>
</template>
<script setup>
import Tabbar from '@/components/tabbar/tabbar.vue'
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'
let counterts = ref()
onMounted(()=>{
    let myChartsage = echarts.init(counterts.value);
    // 设置实例的配置项
    myChartsage.setOption({
        title: {
    text: '雷达图'
  },
  legend: {
    // data: ['Allocated Budget', 'Actual Spending']
  },
  radar: {
    shape: 'circle',
    indicator: [
      { name: 'Sales',  },
      { name: 'Administration',  },
      { name: 'Information Technology', },
      { name: 'Customer Support', },
      { name: 'Development',  },
      { name: 'Marketing',  }
    ]
  },
  
  series: [
    {
      name: 'Budget vs spending',
      type: 'radar',
      data: [
        {
          value: [4200, 3000, 20000, 35000, 50000, 18000],
          name: 'Allocated Budget'
        },
        {
          value: [5000, 14000, 28000, 26000, 42000, 21000],
          name: 'Actual Spending'
        }
      ]
    }
  ]
    })
})
</script>
<style lang="scss" scoped>
.counterbox{
    background: url('@/assets/image/screen/agecb.png') no-repeat;
    background-size: 100% 100%;
    height: 300px;
    width: 100%;
    .countercs{
        height: 200px;
        margin-top: 30px;
        // padding: 20px;
        width: 100%;
    }
}
</style>